<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./static/element-plus/index.css" />
  <script src="./static/js/vue.global.js"></script>
  <script src="./static/element-plus/index.full.js"></script>
  <script src="./static/element-plus/theme-chalk/display.css"></script>
  <style>
    .el-carousel__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4" style="display: flex; flex-direction: row; align-items: center">
            <img src="./static/images/logo.png" style="height: 60px" />
            <h2 style="padding-left: 8px">技术社区</h2>
          </el-col>
          <el-col :span="8" style="height: 60px; line-height: 60px">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
              style="border-bottom: none !important">
              <el-menu-item index="1" style="font-size: 20px">首页</el-menu-item>
              <el-menu-item index="2" style="font-size: 20px">文章</el-menu-item>
              <el-menu-item index="3" style="font-size: 20px">课程</el-menu-item>
              <el-menu-item index="4" style="font-size: 20px">商城</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="8" style="height: 60px; line-height: 60px" class="hidden-xs-only">
            <el-input placeholder="请输入内容">/>
          </el-col>
          <el-col :span="4" v-if="isLoggendIn" style="text-align: right; height: 60px; line-height: 60px"
            class="hidden-only-sm;">
            <el-link type="primary"><a href="login.html"
                style="text-decoration: none; color: rgb(91, 225, 255);">登录</a></el-link>
            <el-link type="primary" style="padding-left: 10px"><a href="register.html"
                style="text-decoration: none; color: rgb(91, 225, 255);">注册</a></el-link>
          </el-col>
          <el-col :span="4" v-else style="text-align: right; height: 60px; line-height: 60px" class="hidden-only-sm;">
            <el-link type="primary"><img src="./static/images/avatar.png" style="height: 60px;"></el-link>
            <el-link type="primary" style="padding-left: 10px"><a href="person.html"
                style="text-decoration: none; color:rgb(91, 225, 255)">个人中心</a></el-link>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-main style="background-color: whitesmoke; margin-top: 20px;">
          <el-row :gutter="20" style="row-gap: 20px">
            <el-col :xs="24" :sm="12" :md="8" v-for="(product,i) in productList">
              <div style="
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.1);
                padding: 20px;
                display: flex;
                flex-direction: column;
                align-items: center; 
                ">
                  <div style="
                  width: 100%;
                  height: 200px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  ">
                    <img v-bind:src='product.img' style="width: 100%; height: 100%; object-fit: contain">
                  </div>
                  <div style="
                    text-align: center;
                    margin-top: 15px;
                    width: 100%;
                  ">
                    <p style="
                      font-weight: bold;
                      font-size: 16px;
                      margin: 10px 0;
                      color: #333;
                    ">{{ product.name }}</p>
                    
                    <div style="
                      color: #666;
                      line-height: 1.6;
                    ">
                      <p style="margin: 5px 0;">
                        价格：<span style="color: #f56c6c; font-weight: 500;">¥{{ product.price }}</span>
                      </p>
                      <p style="margin: 5px 0;">
                        库存：{{ product.stock }}件
                      </p>
                    </div>
                    
                    <el-button 
                      type="primary" 
                      style="
                        margin-top: 15px;
                        width: 80%;
                        border-radius: 20px;
                      "
                      @click="addToCart(product)"
                    >
                      加入购物车
                    </el-button>
                  </div>
              </div>
              <!--
              
              <p style="font-weight: bold; margin: 10px 0">{{product.name}}</p>
              <p>价格：{{product.price}} &nbsp;库存：{{product.stock}}</p>
              <el-button @click="addToCart(product)">加入购物车</el-button>
              -->
            </el-col>
          </el-row>
        </el-main>

        <el-aside style="margin-top: 20px;">
          <el-card>
            <h2>购物车</h2>
            <div v-if="cartItems.length>0">
              <div v-for="(item,i) in cartItems" :key="i">
                <img :src="item.img" style="width: 100px; height: 100px; object-fit: contain">
                {{item.name}}
                <el-input-number v-model="item.number" :min="0" :max="item.stock"
                  @change="handleChange(item)"></el-input-number>
                <el-divider style="margin: 10px 0;" />
              </div>
              {{totalPrice}}
              <el-button type="primary" @click="submitOrder">提交订单</el-button>
            </div>
            <div v-else>
              <el-empty description="暂无数据"></el-empty>
            </div>
          </el-card>
        </el-aside>
      </el-container>
      <el-footer>
        <el-row>
          <el-col :xs="24" :lg="8" style="display: flex; flex-direction: row; align-items: center">
            <div>
              <img src="./static/images/logo.png" style="height: 100px" />
            </div>
            <div>
              <h2>技术社区</h2>
              <p>致力于构建一个专业的IT技术交流社区</p>
            </div>
          </el-col>
          <el-col :xs="24" :lg="8" style="padding-top: 30px;">
            <div style="display: flex; flex-direction: column; gap: 16px;">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">首页</el-link>
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">文章</el-link>
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">课程</el-link>
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">商城</el-link>
              </div>
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">关于我们</el-link>
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">使用手册</el-link>
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">隐私条款</el-link>
                <el-link type="primary" style="flex: 1; text-align: center; font-size: 20px;">建议反馈</el-link>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :lg="8" style="padding-left: 100px;">
            <div>
              <h2>联系我们</h2>
              <p>电话:1234567890</p>
              <p>邮箱:info@example.com</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div style="background-color: rgb(145, 194, 226); width: 100%">
            <p style="text-align: center; margin-top: 20px">
              软件开发工作室版权所有
            </p>
          </div>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</body>

<script>
  var App = {
    data() {
      return {
        name: "Hello Vue!",
        age: 18,
        isLoggendIn: false,
        articles: [
          { title: 'Vue3.0新特性使用攻略', time: "2024-10-28" },
          { title: 'Vue3.0脚手架使用详解', time: "2024-10-25" },
          { title: 'ElementPlus框架应用场景', time: "2024-10-17" },
          { title: '5款独立开发者必备神器', time: "2024-10-12" }
        ],
        courses: [
          { title: "零基础学JavaScript", price: 49 },
          { title: "Vue.js从入门到实战", price: 199 },
          { title: "深入浅出状态管理", price: 29 },
          { title: "说透大厂前端项目面试题", price: 69 }
        ],
        productList: [
          { id: '1', type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: './static/images/product01.png' },
          { id: '2', type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: './static/images/product02.png' },
          { id: '3', type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: './static/images/product03.png' },
          { id: '4', type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: './static/images/product04.png' },
          { id: '5', type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: './static/images/product05.png' },
          { id: '6', type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: './static/images/product06.png' },
        ],
        cartItems: [],
        //totalPrice: 0,
      };
    },
    methods: {
      addToCart(product) {
        const cartItem = this.cartItems.find(item => item.id === product.id);
        
        if (cartItem) {

          if( cartItem.number < product.stock) {
            cartItem.number++
          }else {
            this.$message.error('库存不足')
          }
          
        } else {
          this.cartItems.push({ ...product, number: 1 })
        }
        //this.calcPrice()
      },
      handleChange(item) {
        if (item.number <= 0) {
          this.removeFromCart(item)
        }
        //this.calcPrice()
      },
      //从购物车中删除商品
      removeFromCart(item) {
        const index = this.cartItems.indexOf(item);
        if (index > -1) {
          this.cartItems.splice(index, 1);
        }
      },
      //计算总价
      //calcPrice() {
        //this.totalPrice = this.cartItems.reduce((total, item) => {
          //return total + item.price * item.number
        //}, 0)
      //},
    },
    computed: {
      totalPrice(){
        return this.totalPrice = this.cartItems.reduce((total, item) => {
          return total + item.price * item.number
        }, 0);
      }
    }
  };
  Vue.createApp(App).use(ElementPlus).mount("#app");
</script>

</html>
